{% extends 'layout/manage.html' %}
{% load static %} 
{% block css %}
<style>
  .panel-default .panel-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .panel-default > .panel-heading a {
    text-decoration: none;
  }

  .panel-default > .panel-heading span {
    padding: 0 5px;
  }

  .panel-default > .panel-heading .function .upload {
    overflow: hidden;
  }

  .panel-default > .panel-heading .function .upload input {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 76px;
    left: -2px;
    overflow: hidden;
  }

  .upload-progress {
    position: fixed;
    right: 2px;
    bottom: 2px;
    width: 400px;
  }

  .upload-progress .progress-error {
    color: red;
  }
</style>
{% endblock %}
{% block content %}
<div class="container-fluid">
  <div class="panel panel-default" style="margin-top: 20px">
    <!-- Default panel contents -->
    <div class="panel-heading">
      <div>
        <a href="{% url 'file' project_id=request.tracer.project.id %}">
          <i class="fa fa-home" aria-hidden="true"></i>
          <span>文件库</span>
        </a>
        {% for record in breadcrumb_list %}
        <a
          href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ record.id }}"
        >
          <i class="fa fa-caret-right" aria-hidden="true"></i>
          <span>{{ record.name }}</span>
        </a>
        {% endfor %}
      </div>
      <div class="function">
        <div class="btn btn-primary btn-xs upload" style="position: relative">
          <div><i class="fa fa-upload" aria-hidden="true"></i> 上传文件</div>
          <input type="file" multiple name="uploadFile" id="uploadFile" />
        </div>
        <a
          class="btn btn-success btn-xs"
          data-toggle="modal"
          data-target="#addModal"
          data-whatever="新建文件夹"
        >
          <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建文件夹
        </a>
      </div>
    </div>
    <!-- Table -->
    <table class="table">
      <thead>
        <tr>
          <th>名称</th>
          <th>文件大小</th>
          <th>更新者</th>
          <th>更新时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="rowList">
       {% for item in file_object_list %}
        <tr>
          <td>
            {% if item.file_type == 1 %}
            <i class="fa fa-file" aria-hidden="true"></i>
            {{ item.name }} {% else %}
            <a href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ item.id }}">
              <i class="fa fa-folder" aria-hidden="true"></i>
              {{ item.name }}
            </a>
            {% endif %}
          </td>
          <td>
            {% if item.file_type == 1 %} 
            {{ item.file_size }} 
            {% else %} - 
            {% endif %}
          </td>
          <td>{{ item.update_user.username }}</td>
          <td>{{ item.update_datetime }}</td>
          <td>
            {% if item.file_type == 2 %}
            <a class="btn btn-default btn-xs" data-toggle="modal" data-target="#addModal" data-name="{{ item.name }}"
              data-fid="{{ item.id }}"
              data-whatever="修改文件夹"
            >
              <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
            </a>
            {% else %}
            <a class="btn btn-default btn-xs"  href="{% url 'file_download' project_id=request.tracer.project.id file_id=item.id %}">
              <i class="fa fa-cloud-download" aria-hidden="true"></i>
            </a>
            {% endif %}

            <a
              class="btn btn-danger btn-xs"
              data-toggle="modal"
              data-fid="{{ item.id }}"
              data-target="#alertModal"
            >
              <i class="fa fa-trash" aria-hidden="true"></i>
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
        <form id="form">
          {% csrf_token %}
          <input class="hide" type="text" name="fid" id="fid" />
          {% for field in form %}
          <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            <span class="error-msg">{{ field.errors.0 }}</span>
          </div>
          {% endfor %}
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          取 消
        </button>
        <button id="btnFormSubmit" type="button" class="btn btn-primary">
          确 定
        </button>
      </div>
    </div>
  </div>
</div>

<div
  class="modal fade"
  id="alertModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
>
  <div class="modal-dialog" role="document">
    <div class="alert alert-danger alert-dismissible fade in" role="alert">
      <button
        type="button"
        class="close"
        data-dismiss="modal"
        aria-label="Close"
      >
        <span aria-hidden="true">×</span>
      </button>
      <h4>是否要确定删除？</h4>
      <p style="padding-top: 20px; padding-bottom: 20px">
        文件夹中包含的所有的文件都会被删除。
      </p>
      <p style="text-align: right">
        <a
          class="btn btn-default btn-sm"
          data-dismiss="modal"
          aria-label="Close"
          >取 消</a
        >
        <button id="btnDelete" type="button" class="btn btn-danger btn-sm">
          确 定
        </button>
      </p>
    </div>
  </div>
</div>

<div id="uploadProgress" class="upload-progress hide">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传进度
    </div>

    <table class="table">
      <tbody id="progressList"></tbody>
    </table>
  </div>
</div>

<div class="hide">
  <table id="progressTemplate">
    <tr>
      <td>
        <div class="name"></div>
        <div class="progress">
          <div
            class="progress-bar progress-bar-success progress-bar-striped"
            role="progressbar"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
            style="width: 0%"
          >
            0%
          </div>
        </div>
        <div class="progress-error"></div>
      </td>
    </tr>
  </table>
</div>

<div class="hide">
  <table id="rowTpl">
    <tr>
      <td>
        <i class="fa fa-file" aria-hidden="true"></i>
        <span class="name"></span>
      </td>
      <td class="file_size"></td>
      <td class="username"></td>
      <td class="datetime"></td>
      <td>
        <a class="btn btn-default btn-xs download">
          <i class="fa fa-cloud-download" aria-hidden="true"></i>
        </a>

        <a class="btn btn-danger btn-xs delete" data-toggle="modal" data-target="#alertModal">
          <i class="fa fa-trash" aria-hidden="true"></i>
        </a>
      </td>
    </tr>
  </table>
</div>
{% endblock %}
{% block js %}
<script>
  var FOLDER_URL = "{% url 'file' project_id=request.tracer.project.id %}";
  var FILE_DELETE_URL ="{% url 'file_delete' project_id=request.tracer.project.id %}";
  var FILE_UPLOAD_URL="{% url 'file_post' project_id=request.tracer.project.id %}";
  var CURRENT_FOLDER_ID =  "{{ folder_object.id }}";

  $(function () {
    initAddModal();
    bindModelSubmit();
    bindDeleteSubmit();
    bindUploadFile();
  });

  function bindUploadFile() {
    $("#uploadFile").change(function () {
      var files = $(this)[0].files;
      $.each(files, function (i, file) {
        // 判断文件大小 限制大小10M
        if (file.size > 1024 * 1024 * 10) {
          alert("文件大小不能超过10M");
          return;
        }
        const formData = new FormData();
        formData.append('uploadFile', file);
        formData.append('parent_id', CURRENT_FOLDER_ID);
        $.ajax({
        url: FILE_UPLOAD_URL, // 替换为你的上传 URL
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: (res) =>{
          console.log("文件上传成功", res);
          if (res.status) {
            location.href = location.href;
          }
        },
        error: (err)=> {
          console.error("文件上传失败", err);
        },
      });
      });
      //上传文件到
     

      //重置文件输入框的值
      $(this).val("");
    });
  }

  function bindDeleteSubmit() {
    $("#btnDelete").click(function () {
      // 获取要删除那行ID
      $.ajax({
        url: FILE_DELETE_URL,
        type: "GET",
        data: { fid: $(this).attr("fid") },
        success: function (res) {
          if (res.status) {
            location.href = location.href;
          }
        },
      });
    });
  }

  function initAddModal() {
    $("#addModal").on("show.bs.modal", function (event) {
      var button = $(event.relatedTarget); // Button that triggered the modal
      var recipient = button.data("whatever"); // Extract info from data-* attributes
      var name = button.data("name"); // Extract info from data-* attributes
      var fid = button.data("fid"); // Extract info from data-* attributes
      var modal = $(this);
      modal.find(".modal-title").text(recipient);

      if (fid) {
        // 编辑
        modal.find("#id_name").val(name);
        modal.find("#fid").val(fid);
      } else {
        // 新建
        modal.find(".error-msg").empty();
        $("#form")[0].reset();
      }
    });

    $("#alertModal").on("show.bs.modal", function (event) {
      var button = $(event.relatedTarget); // Button that triggered the modal
      var fid = button.data("fid"); // Extract info from data-* attributes
      $("#btnDelete").attr("fid", fid);
    });
  }

  function bindModelSubmit() {
    $("#btnFormSubmit").click(function () {
      $.ajax({
        url: location.href,
        type: "POST",
        data: $("#form").serialize(),
        dataType: "JSON",
        success: function (res) {
          if (res.status) {
            location.href = location.href;
          } else {
            $.each(res.error, function (key, value) {
              $("#id_" + key)
                .next()
                .text(value[0]);
            });
          }
        },
      });
    });
  }
</script>
{% endblock %}
